<script setup lang="ts">
import { RouterLink, RouterView, useRoute } from 'vue-router'
import { routesList } from '@/router/index'
import { computed, ref } from 'vue'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
const routeList = ref<any>(routesList)

const route = useRoute()
console.log(route, 'route')

const elementUiAdminMenu = ['userManage', 'roleManage', 'studemo62', 'login']
const isRouteStudemo61 = computed(() => {
  return elementUiAdminMenu.includes(route.name as string)
})
</script>

<template>
  <div :class="isRouteStudemo61 ? 'app-mian-flex' : 'app-main'">
    <header v-if="!isRouteStudemo61">
      <div class="wrapper">
        <!-- <nav>
        <RouterLink v-for="item in routeList" :key="item.name" :to="{ path: item.path }">{{
          item.title || item.name
        }}</RouterLink>
      </nav> -->
        <hr />

        <nav>
          <RouterLink to="/">首页</RouterLink>
          <RouterLink to="/studemo1">选项式API</RouterLink>
          <RouterLink :to="{ path: '/studemo2' }">组合式API</RouterLink>
          <RouterLink :to="{ name: 'studemo3Name' }">组合式API-自定义渲染-返回函数</RouterLink>
          <RouterLink to="/studemo4">组合式API-自定义渲染-JSX</RouterLink>
          <RouterLink to="/studemo5">setup 语法糖</RouterLink>
          <RouterLink to="/studemo6">setup 语法糖（ts）</RouterLink>
          <RouterLink to="/studemo21">模板语法-文本</RouterLink>
          <RouterLink to="/studemo22">模板语法-属性</RouterLink>
          <RouterLink to="/studemo23">内置指令</RouterLink>
          <RouterLink to="/studemo24">绑定 HTML class</RouterLink>
          <RouterLink to="/studemo25">绑定内联样式 Style</RouterLink>
          <RouterLink to="/studemo31">声明响应式状态 ref & reactive</RouterLink>
          <RouterLink to="/studemo32">Reactive包装注意事项</RouterLink>
          <RouterLink to="/studemo33">reactive() 的局限性</RouterLink>
          <RouterLink to="/studemo34">额外的 ref 解包细节</RouterLink>
          <RouterLink to="/studemo35">响应式 API:工具函数</RouterLink>
          <RouterLink to="/studemo36">shallowReactive() & shallowReadonly()</RouterLink>
          <RouterLink to="/studemo37">shallowRef() & triggerRef()</RouterLink>
          <RouterLink to="/studemo38">toRaw() & unref() & markRaw()</RouterLink>
          <RouterLink to="/studemo39">customRef()</RouterLink>
          <RouterLink to="/studemo310"
            >effectScope() & getCurrentScope() & onScopeDispose() 案例1</RouterLink
          >
          <RouterLink to="/studemo311"
            >effectScope() & getCurrentScope() & onScopeDispose()案例2</RouterLink
          >
          <RouterLink to="/studemo312"
            >effectScope() & getCurrentScope() & onScopeDispose()案例3</RouterLink
          >
          <RouterLink to="/studemo313"> 计算属性 </RouterLink>
          <RouterLink to="/studemo314"> 侦听器1 </RouterLink>
          <RouterLink to="/studemo315">侦听数据源类型</RouterLink>
          <RouterLink to="/studemo316"> 侦听器 watchEffect</RouterLink>
          <RouterLink to="/studemo317"> 侦听器 副作用清理</RouterLink>
          <RouterLink to="/studemo41"> 组件注册和引入 </RouterLink>
          <RouterLink to="/studemo42"> 组件传值 props </RouterLink>
          <RouterLink to="/studemo43"> 组件事件 emit </RouterLink>
          <RouterLink to="/studemo44"> 插槽 Slots </RouterLink>
          <RouterLink to="/studemo45"> 插槽列表演示 </RouterLink>
          <RouterLink to="/studemo46"> 组合式 API：生命周期钩子 </RouterLink>
          <RouterLink to="/studemo47"> 组件 v-model </RouterLink>
          <RouterLink to="/studemo48"> 组合式函数 </RouterLink>

          <RouterLink to="/studemo51"> 使用内置的 fetch API 进行请求 </RouterLink>
          <RouterLink to="/studemo52"> axios 安装和使用 </RouterLink>
          <RouterLink to="/studemo61"> elementUI </RouterLink>
          <RouterLink to="/studemo62"> elementUI案例 </RouterLink>

          <RouterLink to="/stduydemo1"> 案例-学生成绩管理系统 </RouterLink>
          <RouterLink to="/stduydemo2"> 案例-学生成绩管理系统2 </RouterLink>
          <RouterLink to="/stduydemo3">
            案例-学生成绩管理系统3(访问模板引用ref&组件暴漏defineExpose())
          </RouterLink>

          <RouterLink to="/mytest1"> 测试案例- test1 </RouterLink>
        </nav>

        <router-link to="/srdemo1">srdemo1路由</router-link>
        <router-link to="/srdemo1/detail1">srdemo1嵌套路由 detail1</router-link>

        <router-link
          :to="{
            //name:'xiang1', //用name也可以跳转
            path: '/srdemo1/detail1',
            query: {
              id: 1,
              title: '新闻标题',
              content: '内容'
            }
          }"
        >
          query 传参
        </router-link>

        <router-link
          replace
          :to="{
            name: 'xiang2',
            params: {
              title: '新闻标题',
              content: '内容'
            }
          }"
        >
          params 传参:replace
        </router-link>

        <router-link
          :to="{
            name: 'defaultp',
            params: {
              id: '10000'
            }
          }"
        >
          default: params 传参
        </router-link>
      </div>
    </header>
    <div>
      <el-config-provider :locale="zhCn">
        <RouterView />
      </el-config-provider>
    </div>
  </div>
</template>

<style scoped lang="scss">
header {
  border-bottom: 1px solid var(--color-border2);
  padding: 10px 0;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;

  a {
    display: inline-block;
    padding: 0 1rem;
    border-left: 1px solid var(--color-border);
    color: blue;
    margin: 5px 0;
  }
}
</style>
